<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="../js/jq.js"></script>
    <style>
        .box{
            width:90%;
            min-height:300px;
            border:1px solid yellowgreen;
            border-radius: 10px;
            overflow: auto;
            padding:20px;
        }
        /* 高亮的类 class  */
        .router-link-exact-active, .router-link-active{
            padding:4px;
            background: deeppink;
            color:#f50;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>

        <!-- 5. 路由出口 显示组件的出口 -->
        <router-view class="box"></router-view>

        <!-- 6.声明式 导航 -->


    </div>

    <template id="myhead">
        <div>
            <h2>header---header</h2>
        </div>
    </template>

    <template id="main">
        <div>
            <h2>Main--主路由</h2>
            <router-view class="box"></router-view>
            <my-foot></my-foot>
        </div>
    </template>

    <template id="notfound">
        <div>
            <h2>404--NotFound</h2>
        </div>
    </template>

    <template id="wechat">
        <div>
            <h2>wechat--首页</h2>
        </div>
    </template>

    <template id="contact">
        <div>
            <h2>contact---通讯录</h2>
            <ul>
                <li v-for="(l,i) in list" :key="i">
                    <router-link :to="{name:'detail',query:l,params:{id:l.id}}">{{l.name}}</router-link>
                </li>
            </ul>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>find--朋友圈</h2>
        </div>
    </template>

    <template id="my">
        <div>
            <h2>my--我的</h2>
        </div>
    </template>

    <template id="myfoot">
        <div>
            <router-link :to="{name:l.name}" v-for="(l,i) in flist" :key="i">{{l.text}}</router-link>
        </div>
    </template>

    <template id="detail">
        <div>
            <h2>歌手详情</h2>
            <button @click="goback">返回</button>
            <button @click="gomine">个人中心</button>
            <h2>id-{{$route.params.id}}</h2>
            <h2>name-{{$route.query.name}}</h2>
            <img :src="$route.query.picUrl" alt="" width="200" height="200">
        </div>
    </template>



    <script>
        //组件
        Vue.component('MyHead', {
            template: '#myhead'
        })

        //0 模块化编程  Vue.use(VueRouter)

        //1.定义（路由）组件
        const Main ={
            template:'#main'
        }
        const Wechat ={
            template:'#wechat'
        }
        const Contact ={
            template:'#contact',
            data(){
                return{
                    list:[]
                }
            },
            mounted() {
                $.ajax({
                    url:'http://47.104.209.44:3333/artist/list',
                    data:{},
                    type:'get',
                    success:res=>{
                        console.log(res);
                        this.list=res.artists;
                    }
                })
            },
        }
        const Find={
            template:'#find'
        }
        const My={
            template:'#my'
        }
        const NotFound = {
            template:'#notfound'
        }
        const Detail = {
            template:'#detail',
            methods: {
                goback(){
                    // router.go(-1)
                    this.$router.go(-1)
                    // router.back()
                    // history.go(-1)
                    // history.back()
                },
                gomine(){
                    this.$router.push('/my')
                    // router.push({path:'/my'})
                    // router.push({name:'my',query:{id:999},params:{}})
                }
            },
        }
        const MyFoot = {
            template:'#myfoot',
            data(){
                return{
                    flist:[
                        {path:'/wechat',name:'wechat',text:'微信'},
                        {path:'/contact',name:'contact',text:'通讯录'},
                        {path:'/find',name:'find',text:'发现'},
                        {path:'/my',name:'my',text:'我的'},
                    ]
                }
            }
        }
        Vue.component('MyFoot',MyFoot)

        // 2.  定义路由匹配规则  (Path && Component)
        const routes = [
            {
                path:'/',
                redirect:'/main'
            },
            {
                path:'/main',
                name:'main',
                component:Main,
                redirect:'/wechat',
                children:[
                    //用 children 接受子路由 也需要路由出口
                    {
                        path:'/wechat',
                        name:'wechat',
                        component:Wechat
                    },
                    {
                        path:'/contact',
                        name:'contact',
                        component:Contact
                    },
                    {
                        path:'/find',
                        name:'find',
                        component:Find
                    },
                    {
                        path:'/my',
                        name:'my',
                        component:My
                    },
                ]
            },
            {
                path:'/detail/:id',
                name:'detail',
                component:Detail
            },
            {
                path:'/404',
                alias:'/notfound',
                component:NotFound,
                name:'404'
            },
            {
                path:'*',
                redirect:{
                    name:'wechat'
                }
            }
        ]





        // 3.创建路由对象
        //参数
        const router = new VueRouter({
            routes:routes,
            mode:'hash',    //默认hash路由
            base:'',    //项目上线的时候
            scrollBehavior (to, from, savedPosition) {
                // 记录滚动条的行为
                return savedPosition
            }
        })
        // scrollBehavior 滚动行为 
        // base 应用的基路径  一般不用设置   采用是相对路径   上线的时候才需要单独去设置路径
        // mode 路由模式   
        // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置

        const vm = new Vue({
        //4.挂载到根实例
            router, //this.$router 全局变量
        
            data: {
                title: '路由嵌套',
            },
            watch:{
                // 监听路由切换 
                '$route':function(to,from){
                    console.log(to)    // 即将进入的路由
                    console.log(from)  // 即将离开的路由  
                }
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title;
                console.log(this.$router )   //  全局路由对象   用于实现路由守卫 路由跳转和路由切换 
                console.log(this.$route  )   //  当前激活的路由对象信息数据  获取路由参数 获取路由信息 
            }
        }).$mount('#app')
    </script>
    <!-- 
        嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
        
        路由跳转

        1. 声明式  html跳转  router-link   to   
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串  router = this.$router 
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->
</body>

</html>